<template>
  <header id="header">
    <div class="l-content">
      <!-- 折叠 -->
      <i plain :class="isCollapseIcon" @click="isCollapse"></i>
      <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: 'homepage' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="crumbasMe.path" v-if="crumbasMe">{{
          crumbasMe.meta.label
        }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="r-content">
      <!-- 全屏 -->
      <span class="fullScreen">
        <i class="el-icon-rank" @click="fullScreenEv"></i>
      </span>

      <!-- 下拉 -->
      <el-dropdown trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
          GFT<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="e" divided>退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <!-- 更多 -->
      <span class="more">
        <i class="el-icon-more"></i>
      </span>
    </div>
  </header>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      title: "首页",
    };
  },
  methods: {
    // 侧边栏状态
    isCollapse() {
      this.$store.commit("headerData/isCollapse");
    },

    // 退出
    handleCommand() {
      // 清除 vux 缓存
      this.$store.commit("loginData/LoginOut");
      // 回到登录页面
      this.$router.push("/");

      location.reload()

    },

    // 全屏
    fullScreenEv() {
      let element = document.documentElement;
      // 判断是否已经是全屏
      // 如果是全屏，退出
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        console.log("已还原！");
      } else {
        // 否则，进入全屏
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
        console.log("已全屏！");
      }
      // 改变当前全屏状态
      this.fullscreen = !this.fullscreen;
    },
  },

  // 计算属性
  computed: {
    // 侧边栏头部文字显示
    isCollapseIcon() {
      if (this.$store.state.headerData.isCollapse) {
        return "el-icon-s-unfold iconStyle";
      } else {
        return "el-icon-s-fold iconStyle";
      }
    },

    // 面包屑导航
    crumbasMe() {
      return this.$store.state.crumbsData.currentMenu;
    },
  },
};
</script>

<style lang="scss">
#header {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;

  .l-content {
    display: flex;
    align-items: center;

    i {
      margin-right: 20px;
      cursor: pointer;
    }
    h3 {
      font-size: 18px;
    }

    .iconStyle {
      font-size: 26px;
    }
  }

  .r-content {
    .fullScreen {
      .el-icon-rank {
        transform: rotate(45deg);
        font-size: 20px;
        margin-right: 15px;
        cursor: pointer;
      }
    }

    .el-dropdown-link {
      font-size: 18px;
      cursor: pointer;
      color: #545c64;
    }

    .el-icon-arrow-down {
      font-size: 16px;
    }

    .more {
      .el-icon-more {
        transform: rotate(90deg);
        font-size: 20px;
        margin-left: 15px;
        cursor: pointer;
      }
    }
  }
}
</style>